<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3d旋转的立体小方块</title>
<style>
#my3dspace{ margin-top:20px;-webkit-perspective:800;-webkit-perspective-origin: 50% 50%;}
#pagegroup{ width:200px; height:200px; position:relative;-webkit-transform-style:preserve-3d; margin-top:200px;}
.page{ width:158px; height:158px; padding:20px;color:#fff; font-size:158px; line-height:158px; text-align:center; position:absolute; border:1px solid #fff; background:black;}
#page1{}
#page2{-webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg);}
#page3{-webkit-transform-origin:left; -webkit-transform:rotateY(90deg);}
#page4{-webkit-transform-origin:right; -webkit-transform:rotateY(-90deg);}
#page5{-webkit-transform-origin:bottom; -webkit-transform:translateZ(-200px);}
#page6{-webkit-transform-origin:top; -webkit-transform:rotateX(-90deg);}
</style>

<script type="text/javascript">
var timer=null;
var i=0;
function autoPlay(){
	i++;
	document.getElementById("pagegroup").style.webkitTransform= "rotateX("+i+"deg) rotateY("+i+"deg) rotateZ("+i+"deg)";
}
timer=setInterval(autoPlay,20);
</script>
</head>
<body>
<center>
<div id="my3dspace">
	<div id="pagegroup">
    	<div class="page" id="page1">1</div>
        <div class="page" id="page2">2</div>
        <div class="page" id="page3">3</div>
        <div class="page" id="page4">4</div>
        <div class="page" id="page5">5</div>
        <div class="page" id="page6">6</div>
    </div>
</div>
</center>
</body>
</html>
